<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Jumbo Proxy Switcher v1.0</title>
		<link type="text/css" rel="stylesheet" href="jumboproxy.css" />
		<script type="text/javascript" src="jumboproxy.js"></script>
	</head>
	<body>
		<div id="container">
			<h1>Jumbo Proxy Switcher v1.0</h1>
			<div id="tab-container">
				<ul class="tab-buttons">
					<li class="active" data-target="proxy-tab">
						<button href="#">Proxy</button>
					</li><!--
					--><li data-target="options-tab">
						<button>Options</button>
					</li><!--
					--><li data-target="support-tab">
						<button>Support</button>
					</li>
				</ul>
				<ul class="tabs">
					<li id="proxy-tab" class="active">
						<button id="direct-connection-button" class="button">
							<span id="direct-connection-text">Direct Connection</span></button>
						<button id="system-wide-button" class="button">
							<span id="system-wide-text">System-wide Settings</span></button>
						<hr />
						<ul id="proxy-list">
							
						</ul>
						<button id="reload-proxies" class="reload-button button">
							<svg version="1.1" id="reload-icon" class="button-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
								 width="13.13px" height="16.016px" viewBox="0 0 13.13 16.016" enable-background="new 0 0 13.13 16.016" xml:space="preserve">
							<g>
								<g>
									<path class="reload-shadow" fill-rule="evenodd" clip-rule="evenodd" d="M7.647,7.747l3.603-2.685c0.416-0.416,0.416-0.834,0-1.25
										L7.647,1.128C7.535,1.047,7.395,1,7.244,1C6.866,1,6.562,1.294,6.562,1.656v1.219C2.938,2.885,0,5.818,0,9.438
										C0,13.062,2.947,16,6.578,16c3.373,0,6.15-2.528,6.535-5.784c0.003-0.01,0.012-0.109,0.012-0.153c0-0.344-0.281-0.625-0.627-0.625
										h-1.576c-0.516,0-0.906,0.356-0.959,0.653c-0.303,1.587-1.703,2.784-3.385,2.784c-1.902,0-3.443-1.537-3.443-3.438
										C3.135,7.544,4.666,6.01,6.562,6v1.219c0,0.362,0.304,0.656,0.682,0.656C7.395,7.875,7.535,7.828,7.647,7.747z"/>
								</g>
								<g>
									<path class="reload-outline" fill-rule="evenodd" clip-rule="evenodd" d="M7.647,6.747l3.603-2.685c0.416-0.416,0.416-0.834,0-1.25
										L7.647,0.128C7.535,0.047,7.395,0,7.244,0C6.866,0,6.562,0.294,6.562,0.656v1.219C2.938,1.885,0,4.818,0,8.438
										C0,12.062,2.947,15,6.578,15c3.373,0,6.15-2.528,6.535-5.784c0.003-0.01,0.012-0.109,0.012-0.153c0-0.344-0.281-0.625-0.627-0.625
										h-1.576c-0.516,0-0.906,0.356-0.959,0.653c-0.303,1.587-1.703,2.784-3.385,2.784c-1.902,0-3.443-1.537-3.443-3.438
										C3.135,6.544,4.666,5.01,6.562,5v1.219c0,0.362,0.304,0.656,0.682,0.656C7.395,6.875,7.535,6.828,7.647,6.747z"/>
								</g>
							</g>
							</svg>
							<span id="reload-text">Reload proxy list</span>
						</button>
					</li>
					<li id="options-tab">
						<h3>Proxy auto-rotation</h3>
						<div id="rotation" class="dragdealer">
							<div class="handle">
								<svg version="1.1" id="slider-handle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
									 width="21px" height="25.41px" viewBox="0 0 21 25.41" enable-background="new 0 0 21 25.41" xml:space="preserve">
								<path fill="#FFFFFF" d="M10.146,24.352c-0.589-0.59-1.225-1.195-1.879-1.818C4.626,19.066,0.5,15.137,0.5,10.498
									c0-5.514,4.486-10,10-10s10,4.486,10,10c0,4.639-4.127,8.569-7.768,12.036c-0.654,0.623-1.291,1.229-1.879,1.818L10.5,24.705
									L10.146,24.352z"/>
								<path fill="#999999" d="M10.5,0.998c5.247,0,9.5,4.253,9.5,9.5s-5.719,9.719-9.5,13.5C6.718,20.217,1,15.744,1,10.498
									S5.252,0.998,10.5,0.998 M10.5-0.002c-5.79,0-10.5,4.71-10.5,10.5c0,4.854,4.209,8.862,7.922,12.399
									c0.651,0.619,1.284,1.223,1.871,1.809l0.707,0.707l0.708-0.707c0.586-0.586,1.219-1.189,1.87-1.809
									C16.791,19.359,21,15.352,21,10.498C21,4.708,16.289-0.002,10.5-0.002L10.5-0.002z"/>
								<linearGradient id="back-gradient" gradientUnits="userSpaceOnUse" x1="10.4995" y1="5.4976" x2="10.4995" y2="14.4985">
									<stop  offset="0" style="stop-color:#54C6C6"/>
									<stop  offset="1" style="stop-color:#47A9A9"/>
								</linearGradient>
								<circle fill="url(#back-gradient)" cx="10.5" cy="9.998" r="4.5"/>
								</svg>
							</div>
							<div class="slider-foreground"></div>
						</div>
						<svg version="1.1" id="timer-markings" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
							 width="253px" height="10px" viewBox="0 0 253 10" enable-background="new 0 0 253 10" xml:space="preserve">
						<g>
							<g>
								<polygon fill="#FFFFFF" points="29,1 2,1 0,1 0,3 0,11 2,11 2,3 29,3 		"/>
							</g>
							<g>
								<polygon fill="#484848" points="29,0 2,0 0,0 0,2 0,10 2,10 2,2 29,2 		"/>
							</g>
						</g>
						<g>
							<g>
								<g>
									<rect x="43" y="1" fill="#FFFFFF" width="1" height="10"/>
								</g>
								<g>
									<rect x="43" fill="#484848" width="1" height="10"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="87" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="87" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="54" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="54" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="65" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="65" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="76" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="76" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="131" y="1" fill="#FFFFFF" width="1" height="6"/>
								</g>
								<g>
									<rect x="131" fill="#484848" width="1" height="6"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="98" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="98" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="109" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="109" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="120" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="120" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="175" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="175" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="142" y="1" fill="#FFFFFF" width="1" height="10"/>
								</g>
								<g>
									<rect x="142" fill="#484848" width="1" height="10"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="153" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="153" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="164" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="164" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="219" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="219" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="230" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="230" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="241" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="241" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="252" y="1" fill="#FFFFFF" width="1" height="10"/>
								</g>
								<g>
									<rect x="252" fill="#484848" width="1" height="10"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="186" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="186" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="197" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="197" fill="#484848" width="1" height="5"/>
								</g>
							</g>
							<g>
								<g>
									<rect x="208" y="1" fill="#FFFFFF" width="1" height="5"/>
								</g>
								<g>
									<rect x="208" fill="#484848" width="1" height="5"/>
								</g>
							</g>
						</g>
						</svg>
						<span class="rotation-off">Off</span><!-- 
						--><span class="position-one position">1</span><!--
						--><span class="minutes-one minutes">minutes</span><!--
						--><span class="position-ten position">10</span><!--
						--><span class="minutes-two minutes">minutes</span><!--
						--><span class="position-twenty position">20</span>
						<hr />
						<button id="show-ping-times">
							<div class="on">on</div><!-- 
							 --><div class="off">off</div>
							<!-- <div class="slider"></div> -->
						</button>
						<label for="show-ping-times">Show ping times</label>
					</li>
					<li id="support-tab">
						<form id="support-form">
							<fieldset>
								<label for="token">Unique token</label>
								<input id="token" name="token" type="text" disabled="disabled" required="required" novalidate="novalidate" />
							</fieldset>
							<a class="link" href="mailto:support@jumbroxy.com">support@jumbroxy.com</a>
							<a class="link" href="http://www.jumbroxy.com">www.jumbroxy.com</a>
							<hr />
							<h3>Send request</h3>
							<fieldset>
								<label for="email">email</label>
								<input id="email" name="email" type="text" novalidate="novalidate" />
							</fieldset>
							<fieldset>
								<textarea id="message" name="message" rows="5" cols="10" novalidate="novalidate"></textarea>
							</fieldset>
							<fieldset>
								<input id="send-request" class="send-button button" type="submit" value="Send request" />
							</fieldset>
						</form>	
					</li>
				</ul>
			</div><!-- .tab-container -->
		</div><!-- .container -->				

<!-- We need to place it at the bottom, so the form is rendered already -->
    <script src="jumbo_customer_account.js"></script>
    <script src="proxy_form_controller.js"></script>
    <script src="popup.js"></script>

	</body>
</html>
